<template>
	<view class="waitSignUp">
		<view class="statusBox">
			已完成（{{info.update_time}}完成验收）
		</view>
		<view class=" maxBox">
			<view class="orderList " >
				<view class="disFlex">
					<view class="time">{{info.update_time}}</view>
					<!-- <view class="status">{{val.order_zt}}</view> -->
				</view>
				<view class="goodsInfo">
					<image :src="info.project.cover" mode=""></image>
					<view class="box">
						<view class="name line2">{{info.project.title}}</view>
						<view class="content line3">
							{{info.project.desc}}
						</view>
					</view>
				</view>
				<view class="shopInfo disFlex">
					<view>
						<text class="price">{{info.project.deposit}}</text>
						<text class="word">方案签约定金</text>
					</view>
					<view>
						<text class="price">{{info.project.cost}}</text>
						<text class="word">建成预估费用</text>
					</view>
				</view>
				<view class="labels">
					<view v-for="(v,i) in type" :key='i'>{{v}}</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="info">
				<view class="left">服务区域</view>
				<view class="citys">
					<view class="right" v-for="(item,i) in city" :key='i'>{{item}}</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="info">
				<view class="left" style="width: 160rpx;">展览行业</view>
				<view class="labels"  v-for="(item,i) in industry" :key='i'>
					<view>{{item}}</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="boxInfo">
				<view class="disFlex scale-1px-bottom box">
					<view class="left">下单人姓名</view>
					<view class="right">{{info.name}}</view>
				</view>
				<view class="disFlex scale-1px-bottom box">
					<view class="left">手机号</view>
					<view class="right">{{info.phone}}</view>
				</view>
				<view class="disFlex box">
					<view class="left">展馆名称</view>
					<view class="right">{{info.exhibition_name}}</view>
				</view>
			</view>
		</view>
		<view class="box10">
			<view class="boxInfo">
				<view class="title">方案资料</view>
				<view class="disFlex scale-1px-bottom box">
					<view class="left">资料云盘</view>
					<view class="cBox">
						<view class="text">{{info.project.datum_path}}</view>
						<image class="copy" @tap="copy(`${info.project.datum_path}`)" src="../../../static/img/copy.png" mode=""></image>
					</view>
				</view>
				<view class="disFlex box">
					<view class="left">提取码</view>
					<view class="cBox">
						<view class="text">{{info.project.datum_pwd}}</view>
						<image class="copy" @tap="copy(`${info.project.datum_pwd}`)" src="../../../static/img/copy.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
					<view class="boxInfo">
						<view class="disFlex box">
							<view class="left">施工开始日期</view>
							<view class="right">{{info.work_start_time}}</view>
						</view>
						<view class="disFlex box">
							<view class="left">施工结束日期</view>
							<view class="right">{{info.work_end_time}}</view>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				type:[],
				city:[],
				industry:[],
			}
		},
		onLoad(option) {
			this.getinfo(option.id)
			
		},
		methods: {
			getinfo(id){
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				let data = {
					token,
					user_id,
					id
				}
				this.http('/api/project_order/read', 'post', data, )
					.then((res) => {
						if (res.sta == 200) {
							if(res.data.status==0){
								res.data.status='待签约';
							}else if(res.data.status==1){
								res.data.status='已签约';
							}else if(res.data.status==2){
								res.data.status='待施工';
							}else if(res.data.status==3){
								res.data.status='待验收';
							}else if(res.data.status==4){
								res.data.status='已完成';
							}
							this.info=res.data
							console.log(this.info)
							this.gettype()
							this.getcity()
							this.getindustry()
						}
					})
			},
			gettype(){
				this.http('/api/project/boothType', 'post', {}, )
					.then((res) => {
						res.data.forEach((v)=>{
							if(v.id==this.info.project.booth_type){
								this.type.push(v.name)
							}
						})
						if(this.info.project.open_type==1){
							this.type.push('一面开口')
						}else if(this.info.project.open_type==2){
							this.type.push('两面开口')
						}else if(this.info.project.open_type==3){
							this.type.push('三面开口')
						}else if(this.info.project.open_type==4){
							this.type.push('四面开口')
						}
						let a=this.info.project.acreage
						this.type.push(a+'m²')
					})
			},
			getcity(){
				this.http('/api/project/city', 'post', {}, )
					.then((res) => {
						this.citydata = res.data
						let arr=this.info.project.city_id.split(',')
						arr.shift()
						arr.pop()
						this.citydata.forEach((v)=>{
							arr.forEach((s)=>{
								if(s==v.id){
									this.city.push(v.shortname)
								}
							})
						})
					})
				console.log(this.city)
			},
			getindustry(){
				this.http('/api/industry/index', 'post', {}, )
					.then((res) => {
						let industry = res.data
						console.log(industry)
						let arr=this.info.project.industry_id.split(',')
						arr.shift()
						arr.pop()
							console.log(arr)
						industry.forEach((v)=>{
							arr.forEach((s)=>{
									// console.log(s)
								if(s==v.id){
									this.industry.push(v.name)
								}
							})
						})
					})
			},
			
			
			
			
			
			copy (str) {
				uni.setClipboardData({
					data:str,
					success: () => {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.waitSignUp{
		background-color: #fff;
		.statusBox{
			height:120rpx;
			line-height: 120rpx;
			font-size:32rpx;
			background:linear-gradient(90deg,rgba(34,145,255,1) 0%,rgba(93,174,255,1) 100%);
			padding-left: 32rpx;
			color: #fff;
		}
		.maxBox{
			
			.orderList{
				padding: 40rpx;
				.time{
					color: #BDC9D7;
				}
				.status{
					color: #2291FF;
				}
				.goodsInfo{
					margin: 40rpx 0;
					display: flex;
					align-items: center;
					image{
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
					.box{
						padding-left: 30rpx;
						height: 180rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						.name{
							color: #333;
							font-size: 32rpx;
							font-weight: bold;
						}
						.content{
							color: #BDC9D7;
							font-size: 24rpx;
							padding-top: 30rpx;
						}
					}
				}
				.shopInfo{
					margin-top: 50rpx;
					.price{
						color: #FD7103;
						font-size:32rpx;
						font-weight: bold;
						&::before{
							padding-right: 5rpx;
						}
					}
					.word{
						color: #BDC9D7;
						padding-left: 6rpx;
						font-size:20rpx;
					}
				}
				
				.labels{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					>view{
						text-align: center;
						background:rgba(254,114,3,.1);
						// opacity:0.1;
						border-radius:10rpx;
						color:rgba(254,114,3,1);
						padding: 8rpx;
						margin-right: 18rpx;
						margin-bottom: 15rpx;
					}
				}
				
			}
		}
		.info{
			height: 112rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			.left{
				font-size:32rpx;
				color:rgba(190,201,215,1);
				width: 217rpx;
		
			}
			.citys{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-left: 10rpx;
			}
			.right{
				margin-left: 30rpx;
				font-size:32rpx;
				color:rgba(38,38,38,1);
				
			}
			.labels{
				display: flex;
				align-items: center;
				margin-left: 24rpx;
				white-space:nowrap;
				overflow: hidden;
				// text-overflow:ellipsis;
				>view{
					text-align: center;
					background:rgba(254,114,3,.1);
					// opacity:0.1;
					border-radius:10rpx;
					color:rgba(254,114,3,1);
					padding: 8rpx;
				}
			}
		}
		.boxInfo{
			background-color: #fff;
			padding: 0 40rpx;
			.title{
				padding: 35rpx 0 25rpx 0;
				font-size:36rpx;
				font-weight:bold
			}
			.box{
				padding: 35rpx 0;
				.left{
					font-size:32rpx;
				}
				.right{
					color: #BEC9D7;
				}
				.cBox{
					display: flex;
					align-items: center;
					.text{
						color: #BEC9D7;
						padding-right: 26rpx;
					}
					.copy{
						width: 30rpx;
						height: 34rpx;
					}
				}
			}
		}
	}
</style>
